<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/wK2un11/houtai/lib/layui/css/layui.css" />
</head>
<body>
<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" name="desName" id="txtName" class="layui-input">
				</div>
				<button class="layui-btn" id="search" data-type="reload">查询</button>
			</div>
		</div>
		<!--lay-filter="test"，给表格加的一个过滤器，当我有一个点击的操作-->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!--数据表格-->
		<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个添加用户的操作-->
		</script>
		<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<!--检查js文件是否引入成功-->
		<script type="text/javascript" src="/wK2un11/houtai/lib/layui/layui.js"></script>
		<script>
			layui.use('table', function() { //加载表格模块
				var table = layui.table;
				var $=layui.jquery;
				table.render({ //初始化数据表格的，（专业的叫法渲染表格）
					elem: '#test', //table的id
					toolbar: '#toolbarDemo', //开启头部工具栏
					//请求的地址
					url: '/wK2un11/HomessageServlet',  //请求服务器的连接地址
					where: {
						method:'getAllDes'
					},  
					method: 'POST', //请求的方式
					cols: [
						[{
							field: 'id',
							title: 'id',
							width: 80,
						}, {
							field: 'name',
							title: '用户名',
							width: 120,
						}, {
							field: 'uphone',
							title: '手机号',
							width: 180,
						}, {
							field: 'email',
							title: '邮箱',
							width: 180,
						}, {
							field: 'content',
							title: '内容',
							width: 400,
						}, {
							field: 'zhuangtai',
							title: '是否采纳',
							width: 120,
						}, {
							title: '操作',
							width: 150,
							toolbar: '#barDemo'
						}]
					],
					id:'testReload',//写了一个Id，目的是一会从新加载表格用的
					page: true
				});
				table.on('tool(test)', function(obj) { //tool监听的是行内工具栏
					if(obj.event === 'del') {
						console.log(obj.data);
						var url ='/wK2un11/HomessageServlet';//请求服务器的地址
						//确保数据没有问题就进行ajax提交了
						$.post(url, {id:obj.data.id,method:'deleteDes'},
							function(data) {               
								if(data.count>0){
									console.log('删除成功');
									window.location.reload();//当窗口关闭之后刷新页面
								}
							}, "json");
						 
					} else if(obj.event === 'edit') {
						console.log(obj.data);
						layer.open({ //打开一个页面
							type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
							area: ['500px', '400px'], //页面的宽高
							content: './message_update.jsp', //页面所在的位置
							title: '编辑留言',
							success:function(layero,index){
								var body=layer.getChildFrame('body',index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#zhuangtai").val(obj.data.jobs);
							},
							end:function(){
								window.location.reload();//当窗口关闭之后刷新页面
							}
						});
					} else if(obj.event === 'addRole') {
						layer.open({ //打开一个页面
								type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
								area: ['500px', '400px'], //页面的宽高
								content: 'role.html', //页面所在的位置
								title: '角色'
							});
					}
				});
				
				//给search一个点击事件
				//当我执行点击的收走这个方法 search是button的id
				$('#search').on('click',function(){
					var name=$("#txtName").val();//上面搜索框的id
					table.reload('testReload',{//testReload,是上面渲染表格的id
						where:{//接口需要的两个请求参数
							'desName':name
						}
					});
				});
				
			});
		</script>
</body>
</html>